<template>
	<view class="v-toolbar" @touchmove.stop.prevent="noop" v-if="show">
		<view class="v-toolbar__cancel__wrapper" hover-class="v-hover-class">
			<text
				class="v-toolbar__wrapper__cancel"
				@tap="cancel"
				:style="{
					color: cancelColor,
				}"
				>{{ cancelText }}</text
			>
		</view>
		<text class="v-toolbar__title v-line-1" v-if="title">{{ title }}</text>
		<view class="v-toolbar__confirm__wrapper" hover-class="v-hover-class">
			<text
				class="v-toolbar__wrapper__confirm"
				@tap="confirm"
				:style="{
					color: confirmColor,
				}"
				>{{ confirmText }}</text
			>
		</view>
	</view>
</template>

<script>
import props from "./props.js";
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";
/**
 * Toolbar 工具条
 * @description
 * @property {Boolean}	show			是否展示工具条（默认 true ）
 * @property {String}	cancelText		取消按钮的文字（默认 '取消' ）
 * @property {String}	confirmText		确认按钮的文字（默认 '确认' ）
 * @property {String}	cancelColor		取消按钮的颜色（默认 '#909193' ）
 * @property {String}	confirmColor	确认按钮的颜色（默认 '#3c9cff' ）
 * @property {String}	title			标题文字
 * @event {Function}
 * @example
 */
export default {
	name: "v-toolbar",
	mixins: [mpMixin, mixin, props],
	emits: ["confirm", "cancel"],
	methods: {
		// 点击取消按钮
		cancel() {
			this.$emit("cancel");
		},
		// 点击确定按钮
		confirm() {
			this.$emit("confirm");
		},
	},
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.v-toolbar {
	height: 42px;
	@include flex;
	justify-content: space-between;
	align-items: center;

	&__wrapper {
		&__cancel {
			color: $v-tips-color;
			font-size: 15px;
			padding: 0 15px;
		}
	}

	&__title {
		color: $v-main-color;
		padding: 0 60rpx;
		font-size: 16px;
		flex: 1;
		text-align: center;
	}

	&__wrapper {
		&__confirm {
			color: $v-primary;
			font-size: 15px;
			padding: 0 15px;
		}
	}
}
</style>
